<template>
  <div class="addStore">
    <div style="padding: 40px;">
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <!-- 门店名称 -->
        <el-form-item prop="name" label="门店名称:" style="width: 50%;">
          <el-input size="small" @blur="blue" placeholder="请输入门店名称" v-model="form.name" style="width: 200px;"></el-input>
          <div class="ts">
            <div class="red" v-show="yy">已有此门店名称</div>
          </div>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="门店图片:" style="width: 30%;">
          <el-upload class="upload-demo" action="http://127.0.0.1:7001/upload" :on-success="ok"
            :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList">
            <el-button size="small">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <!-- 省市区 -->
        <el-form-item label="省市区:">
          <VDistpicker @province="onChangeProv" @city="onChangeCity" @area="onChangeArea"></VDistpicker>
        </el-form-item>
        <!-- 经纬度 -->
        <el-form-item label="门店经纬度:">
          <el-input size="small" placeholder="地理经度" v-model="j" style="width: 150px;"></el-input>
          <el-input size="small" placeholder="地理纬度" v-model="w" style="width: 150px; margin-left: 20px;"></el-input>
          <el-button size="small" style="margin-left: 20px;" @click="showMap = true">选择坐标</el-button>
          <AMap @cancel="showMap = false" @map-confirm="confirmLocation" :visible="showMap"></AMap>
        </el-form-item>
        <!-- 门店地址 -->
        <el-form-item label="门店地址:">
          <el-input size="small" placeholder="请输入门店地址" v-model="form.deadress" style="width: 400px;"></el-input>
        </el-form-item>

        <!-- 门店电话 -->
        <el-form-item label="门店电话:">
          <el-input size="small" placeholder="请输入门店电话" v-model="form.phone" style="width: 200px;"></el-input>
        </el-form-item>
        <!-- 营业时间 -->
        <el-form-item label="营业时间:">
          <el-time-picker size="small" :value-format="'HH:mm'" @change="xztime" is-range v-model="value1"
            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>

        <!-- 门店支持 -->
        <el-form-item label="门店支持:">
          <el-checkbox @change="check" v-model="zt">支持自提</el-checkbox>
          <el-checkbox @change="check" v-model="wm">支持外卖</el-checkbox>
        </el-form-item>
        <!-- 门店店员 -->
        <el-form-item label="门店操作员:">
          <el-input size="small" placeholder="请输入门店操作员" v-model="form.people" style="width: 200px;"></el-input>
        </el-form-item>
        <!-- 联系人姓名 -->
        <el-form-item label="联系人姓名:">
          <el-input size="small" placeholder="请输入姓名" v-model="form.lxpeople" style="width: 200px;"></el-input>
        </el-form-item>
        <!-- 联系人电话 -->
        <el-form-item label="联系人电话:">
          <el-input size="small" placeholder="请输入电话" v-model="form.lxphone" style="width: 200px;"></el-input>
        </el-form-item>
      </el-form>
      <div class="btnDiv">
        <el-button type="primary" @click="qd" size="small">确定</el-button>
        <el-button size="small" @click="qx">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import AMap from "./Amap.vue";
import VDistpicker from 'v-distpicker'
import { getShopListBx, setShopListBx } from '../../utils/api'
export default {
  data() {
    return {
      form: {
        id: 0,
        name: '',
        img: '',
        adress: '',
        deadress: '',
        phone: '',
        time: '',
        people: '',
        deg: '',
        support: '',
        lxpeople: '',
        lxphone: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入门店名称', trigger: 'blur' }
        ],
      },
      yy: false,
      fileList: [],
      j: '',
      w: '',
      value1: '',
      zt: false,
      wm: false,
      showMap: false
    }

  },
  components: { VDistpicker, AMap },

  created() {
    const Tid = this.$route.query.id
    this.form.id = Tid
    getShopListBx().then(res => {
      const obj = res.data.data.find(item => {
        return item.id == Tid
      })
      console.log(obj);
      this.form = obj
      this.j = '116.01°E'
      this.w = '71°N'
      this.value1 = obj.time.split('-')
      if (obj.support == '1') {
        this.zt = true
      } else if (obj.support == '2') {
        this.wm = true
      } else if (obj.support == '3') {
        this.wm = true
        this.zt = true
      }
    })
  },
  methods: {
    // 确定
    qd() {
      this.$confirm('此操作不可逆,确定修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setShopListBx(this.form).then(res => {
          if (res.status == 200) {
            this.$router.push('/limits/store/list')
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });


    },
    qx() {
      this.$router.push('/limits/store/list')
    },
    confirmLocation(e) {
      this.j = '116.01°E'
      this.w = '71°N'
      this.form.deg = this.j + ' ' + this.w
      this.showMap = false
    },
    showAMap() {
      this.showMap = true;
    },
    // 输入内容检测输入的内容是否存在
    blue() {
      getShopListBx().then(res => {
        const list = res.data.data.map(item => item.name)
        this.yy = list.includes(this.form.name)
      })
    },
    // 时间
    xztime() {
      console.log(this.value1);
      this.form.time = this.value1[0] + '-' + this.value1[1]
      console.log(this.form.time);
    },
    // 多选
    check() {
      if (this.zt && this.wm) {
        this.form.support = '3'
      } else if (this.wm) {
        this.form.support = '2'
      } else if (this.zt) {
        this.form.support = '1'
      }
      console.log(this.form.support);
    },
    ok(file, fileList) {
      const obj = file.data.replaceAll('\\\\', '\\/')
      const http = "http://127.0.0.1:7001" + obj
      this.form.img = http.replaceAll("\\", "\/")

    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 三级联动
    onChangeProv(e) {
      this.form.adress = this.form.adress + e.value
    },
    onChangeCity(e) {
      this.form.adress = this.form.adress + e.value
    },
    onChangeArea(e) {
      this.form.adress = this.form.adress + e.value
      console.log(this.form.adress);
    },
  }
}
</script>
<style scoped>
div/deep/.el-form-item__label {
  margin-right: 40px;
}

.btnDiv {
  width: 200px;
  display: flex;
  justify-content: space-between;
  margin-left: 100px;
  margin-top: 80px;
}

.ts {
  float: right;
  margin-left: 20px;
  display: flex;
}

.red {
  background-color: #F26161;
  margin-left: 20px;
  border-radius: 3px;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  padding: 0px 10px;
  color: #fff;
  margin-top: 3px;
  float: right;
}

div/deep/ .el-form-item__error {
  background-color: #F26161;
  margin-left: 280px;
  margin-top: -35px;
  border-radius: 3px;
  height: 30px;
  line-height: 30px;
  padding: 0px 10px;
  color: #fff;
  float: right;
}

div/deep/ .el-upload-list__item-name {
  margin-left: 40px;
}

/* div/deep/ .el-upload-list__item .el-icon-upload-success {
  position: fixed;
  margin-top: -34px;

} */

.addStore {
  width: 100%;
  height: 100%;
  font-size: 14px;
}
</style>